<script lang="ts" setup>
import { useToast } from 'wot-design-uni'
import { getSafeInfo } from '@/utils/system'
import { phonePattern } from '@/utils/jedi/patterns'
import { getUserInfo, updateUserInfo } from '@/api/userInfo'

defineOptions({ name: 'DiaBasicInfoForm' })
const safeInfo = getSafeInfo()
const realSafeTop = computed(() => {
  return `${safeInfo.top}px`
})
const show = ref(false)
const open = () => {
  show.value = true
  _getUserInfo()
}

const handleClose = () => {
  show.value = false
}
const { success: showSuccess } = useToast()

const model = reactive<{
  nickname: string
  mobile: string
  skills: string
  remark: string
}>({
  nickname: '',
  mobile: '',
  skills: '',
  remark: '',
})
async function _getUserInfo() {
  const res = await getUserInfo()
  const { nickname, mobile, skills, remark } = res
  Object.assign(model, { nickname, mobile, skills, remark })
}

const form_ref = ref()
const rules = {
  nickname: [
    {
      // required: true,
      pattern: /^[\u4E00-\u9FA5·]{2,20}$/,
      message: '限制2-20长度中文姓名',
      validator: (value) => {
        if (value) {
          return Promise.resolve()
        }
        else {
          return Promise.reject('请输入姓名')
        }
      },
    },
  ],
  mobile: [
    {
      // required: true,
      pattern: phonePattern,
      message: '请输入正确的手机号码',
      validator: (value) => {
        if (value) {
          return Promise.resolve()
        }
        else {
          return Promise.reject('请输入手机号码')
        }
      },
    },
  ],
  remark: [
    {
      // required: true,
      max: 200,
      message: '限制200字',
      validator: (value) => {
        if (value && value.length <= 200) {
          return Promise.resolve()
        } else if (!value) {
          return Promise.resolve()
        } else {
          return Promise.reject('限制200字')
        }
      },
    },
  ],
}

function handleSubmit() {
  form_ref.value
    .validate()
    .then(async ({ valid, errors }) => {
      if (valid) {
        const res = await updateUserInfo(model)
        if (res.code === 0) {
          showSuccess({ msg: '更新成功！' })
          setTimeout(() => {
            handleClose()
          }, 600)
        }
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}

defineExpose({
  open,
})
</script>

<template>
  <wd-popup
    v-model="show"
    position="right"
    custom-style="width: 100vw"
    @close="handleClose"
  >
    <view :style="{ paddingTop: realSafeTop }" class="h-screen">
      <wd-navbar title="个人信息" left-text="" left-arrow @click-left="handleClose" />
      <wd-form ref="form_ref" :model="model" label-width="100px" :rules="rules">
        <wd-cell-group border>
          <wd-input
            v-model="model.nickname"
            label="姓名"
            prop="nickname"
            clearable
            disabled
            placeholder="请输入姓名"
          />
          <wd-input
            v-model="model.mobile"
            label="联系电话"
            prop="mobile"
            clearable
            disabled
            placeholder="请输入联系电话"
          />
          <JediTagInput v-model="model.skills" label="技能专长" prop="skills" placeholder="请输入技能标签" />
          <wd-textarea v-model="model.remark" label="简介信息" placeholder="请填写简介信息, 限制200字" :maxlength="200" />
        </wd-cell-group>
        <view class="topLine p-2">
          <wd-button type="primary" size="large" block @click="handleSubmit">
            保存信息
          </wd-button>
        </view>
      </wd-form>
    </view>
  </wd-popup>
</template>
